<template>
  <div class="Login5-objects">

    <img src="../images/untitled1.jpg" style="float:left;margin-right:30px;width:400px ;height:340px;"/>
    <el-button type="text" @click="dialogVisible = true">
      <el-button type="primary" icon="el-icon-plus">选规格</el-button>
    </el-button>
    <el-dialog
      title="百香凤梨"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
        <span>
          <div class="dd">规格</div>
          <el-button size="small">标准（1杯）</el-button>
        </span>
      <span>
          <div class="dd">温度</div>
          <el-row>
            <el-button size="small">多冰</el-button>
            <el-button size="small">少冰</el-button>
            <el-button size="small">正常冰</el-button>
            <el-button size="small">常温</el-button>
            <el-button size="small">热</el-button>
          </el-row>
        </span>
      <span>
          <div class="dd">杯数</div>
          <el-input-number style="height: 80px" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
        </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <!--</div>-->
    <div class="ida">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="详情" name="first">
          <div class="div1">
            <h2 style="color: coral">百香凤梨: 15元/份<br></h2>
            <h3 style="color: #2d3a4b">掌柜描述：店长推荐，酸酸甜甜满杯香<br>
              满杯百香果，果囊很大程度的保留了百<br>
              香果的酸甜</h3>
            <h3 style="color: #454545">同时搭配Q弹珍珠，爽滑椰果，冰热2种<br>
              可选【杯型：冰：大杯，热：中杯纸杯】<br>
              制作时长：1-10分钟<br></h3>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评价" name="second">
          <img src="../images/untitled1.jpg" style=" margin-left:30px;width:100px ;height:70px;"/>
          <h4 style="color: cadetblue">这家店是见过最后的店啦，五星好评，下次还来下单</h4>

          <el-badge :value="1" class="item" type="primary">
            <el-button size="small">评论</el-button>
          </el-badge>
          <el-badge :value="2" class="item" type="warning">
            <el-button size="small">回复</el-button>
          </el-badge>

          <el-dropdown trigger="click">
  <span class="el-dropdown-link">
    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="clearfix">
                评论
                <el-badge class="mark" :value="12" />
              </el-dropdown-item>
              <el-dropdown-item class="clearfix">
                回复
                <el-badge class="mark" :value="3" />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-rate style="margin-top: 10px"
                   v-model="value"
                   show-text>
          </el-rate>
        </el-tab-pane>


        <el-tab-pane label="搭配" name="third">

          <div class="block">
            <span class="demonstration"style="color: #42b983;margin: 50px;margin-left: 240px;margin-bottom: 30px">搭配好了，会有不一样的风味</span>
            <el-carousel height="150px" style="width: 500px;margin-left: 120px">
              <el-carousel-item v-for="item in imagebox" :key="item">
                <img :src="item.img" style="height: 100%;width: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>


  </div>

</template>
<script>

  export default {
    name: "Login5",
    data() {
      return {
        num:5,
        dialogVisible: false,
        activeName: 'second',
        value: 0,
        imagebox: [
          {img: require('../images/untitled2.jpg')},
          {img: require('../images/untitled1.jpg')},
          {img: require('../images/untitled3.jpg')},
          {img: require('../images/untitled4.jpg')}
        ]
      }

    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<style scoped>
  .Login5-objects{
    margin: 20px;

  }

  .item {
    margin-top: 10px;
    margin-right: 30px;
  }
  .dd{
    margin: 10px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
